<template>
  <n-modal v-model:show="showModal" preset="dialog" :show-icon="false" style="width: 800px">
    <n-card v-if="editType==='edit' || editType==='add'">
      <h1 class="text-center text-4xl mb-4">{{ title }}</h1>
      <flexform ref="flexFormref" :formList="formList" :formValue="formValue">
      </flexform>
      <template #action>
        <div class="w-full h-10 flex justify-end items-center">
          <n-button @click="doClose">取消</n-button>
          <n-button @click="handleOK" type="primary">{{ formValue.id ? "编辑" : "创建" }}</n-button>
        </div>
      </template>
    </n-card>
    <n-card v-if="editType==='success'">
      <n-result status="success" title="成功" :description="formValue.id?'编辑成功':'创建成功'">
      </n-result>
      <template #action>
        <div class="w-full h-10 flex justify-end items-center">
          <n-button @click="doClose">关闭</n-button>
        </div>
      </template>
    </n-card>
    <n-card v-if="editType==='error'">
      <n-result status="error" title="错误">
        <template>
          <p>{{ errortext }}</p>
        </template>
      </n-result>
      <template #action>
        <div class="w-full h-10 flex justify-end items-center">
          <n-button @click="getreturn" type="primary">返回</n-button>
          <n-button @click="doClose">关闭</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup name="persionEdit">
import {useRoute, useRouter} from "vue-router";
import http from "@/request/request"

const router = useRouter()
const route = useRoute()
const flexFormref = ref(null)
const showModal = ref(false)
const editType = ref("add")
const title = ref("")
const formValue = ref({})
const errortext = ref("")
const init = (type, item = null) => {
  if (item) {
    item.forEach(el => {
      formValue.value[el.key] = el.value
    })
  }
  showModal.value = true
  editType.value = type
  switch (editType.value) {
    case "add":
      title.value = "新建"
      break;
    case "view":
      title.value = "详情"
      break;
    case "edit":
      title.value = "编辑"
      break;
  }
}
const emit = defineEmits(["shuaxin"])
const doClose = () => {
  showModal.value = false
  emit("shuaxin")
}
const reset = () => {
  console.log("重置数据")
}
// 点击确定
const handleOK = () => {
  flexFormref.value.jiaoyan((value) => {
    http.putuserinfo(value).then(res => {
      if (res.data.code === 0) {
        getsuccess()
      }else{
        getfaild(res.data.error)
      }
    }).catch(error=>{
      getfaild(error)
    })
  })
}
// 交互成功
const getsuccess = () => {
  editType.value = "success"
  setTimeout(() => {
    doClose()
  }, 500)
}

// 交互失败
const getfaild = (jieguo) => {
  editType.value = "error"
  errortext.value = jieguo.toString()
}
// 表单配置
const formList = ref([
  {
    label: "姓名", key: "xingming", type: "input", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {
    label: "民族", key: "minzu", type: "select", dict: "", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {
    label: "籍贯", key: "jiguan", type: "input", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {
    label: "出生地", key: "chushengdi", type: "input", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {
    label: "政治面貌", key: "zhengzhimianmao", type: "select", dict: "", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {label: "身高", key: "shengao", type: "input", suffix: "cm", span: 12, rules: []},
  {label: "体重", key: "tizhong", type: "input", suffix: "kg", span: 12, rules: []},
  {label: "参加工作时间", key: "worktime", type: "picker", span: 12, rules: []},
  {
    label: "最高学历", key: "xueli", type: "select", dict: "", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {
    label: "身份证号", key: "shenfenzheng", type: "input", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {
    label: "联系地址", key: "chushengdizhi", type: "input", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {
    label: "电话", key: "dianhua", type: "input", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {
    label: "所在地区", key: "xianzaidizhi", type: "input", span: 12, rules: [{
      max: 200,
      min: 2,
      message: "请输入2-200位的字符",
      trigger: ["input", "change", "blur"]
    },]
  },
  {label: "出生日期", key: "chushengriqi", type: "picker", span: 12, rules: []},
])

defineExpose({init, doClose, reset})
</script>

<style scoped>

</style>
